import { Button, Form, Input, Checkbox } from 'antd';

import { Dispatch } from 'redux';
import { FormComponentProps } from 'antd/es/form';
import React from 'react';
import { connect } from 'dva';
import { StateType } from '../../model';
import styles from './index.less';
import { Product } from '@/models/product';
import ISwitch from '../ISwitch';
import DiscountOptions from './components/DiscountOptions';

const formItemLayout = {
  labelCol: {
    span: 5,
  },
  wrapperCol: {
    span: 19,
  },
};
interface Step2Props extends FormComponentProps {
  data?: StateType['formData'];
  dispatch?: Dispatch<any>;
  submitting?: boolean;
}

const Step2: React.FC<Step2Props> = props => {
  const { form, data, dispatch, submitting } = props;
  const { getFieldDecorator, validateFields, getFieldsValue } = form;
  if (!data) {
    return null;
  }
  const {
    giftPoint,
    giftGrowth,
    usePointLimit,
    previewStatus,
    newStatus,
    recommendStatus,
    serviceIds,
    detailTitle,
    detailDesc,
  } = data;
  const onPrev = () => {
    if (dispatch) {
      const values = getFieldsValue();
      dispatch({
        type: 'addProduct/saveStepFormData',
        payload: {
          ...data,
          ...values,
        },
      });
      dispatch({
        type: 'addProduct/saveCurrentStep',
        payload: 'info',
      });
    }
  };
  const onValidateForm = (e: React.FormEvent) => {
    e.preventDefault();
    validateFields((err, values) => {
      if (!err && dispatch) {
        dispatch({
          type: 'addProduct/saveStepFormData',
          payload: {
            ...data,
            ...values,
          },
        });
        dispatch({
          type: 'addProduct/saveCurrentStep',
          payload: 'attribute',
        });
      }
    });
  };

  return (
    <Form layout="horizontal" className={styles.stepForm}>
      <Form.Item {...formItemLayout} label="赠送积分">
        {getFieldDecorator<Product>('giftPoint', {
          initialValue: giftPoint,
        })(<Input />)}
      </Form.Item>
      <Form.Item {...formItemLayout} label="赠送成长值">
        {getFieldDecorator<Product>('giftGrowth', {
          initialValue: giftGrowth,
        })(<Input />)}
      </Form.Item>
      <Form.Item {...formItemLayout} label="积分购买限制">
        {getFieldDecorator<Product>('usePointLimit', {
          initialValue: usePointLimit,
        })(<Input />)}
      </Form.Item>
      <Form.Item {...formItemLayout} label="预告商品">
        {getFieldDecorator<Product>('previewStatus', {
          initialValue: previewStatus,
        })(<ISwitch />)}
      </Form.Item>
      <Form.Item {...formItemLayout} label="新品">
        {getFieldDecorator<Product>('newStatus', {
          initialValue: newStatus,
        })(<ISwitch />)}
      </Form.Item>
      <Form.Item {...formItemLayout} label="推荐">
        {getFieldDecorator<Product>('recommendStatus', {
          initialValue: recommendStatus,
        })(<ISwitch />)}
      </Form.Item>
      <Form.Item {...formItemLayout} label="服务保障">
        {getFieldDecorator<Product>('serviceIds', {
          initialValue: serviceIds,
        })(
          <Checkbox.Group>
            <Checkbox value={0}>无忧退货</Checkbox>
            <Checkbox value={1}>快速退款</Checkbox>
            <Checkbox value={2}>免费包邮</Checkbox>
          </Checkbox.Group>,
        )}
      </Form.Item>
      <Form.Item {...formItemLayout} label="详细页标题">
        {getFieldDecorator<Product>('detailTitle', {
          initialValue: detailTitle,
        })(<Input />)}
      </Form.Item>
      <Form.Item {...formItemLayout} label="详细页描述">
        {getFieldDecorator<Product>('detailDesc', {
          initialValue: detailDesc,
        })(<Input />)}
      </Form.Item>
      <Form.Item {...formItemLayout} label="选择优惠方式">
        {getFieldDecorator('discountMethod')(<DiscountOptions />)}
      </Form.Item>
      <Form.Item
        style={{ marginBottom: 8 }}
        wrapperCol={{
          xs: { span: 24, offset: 0 },
          sm: {
            span: formItemLayout.wrapperCol.span,
            offset: formItemLayout.labelCol.span,
          },
        }}
        label=""
      >
        <Button onClick={onPrev}>上一步，填写商品信息</Button>
        <Button
          type="primary"
          onClick={onValidateForm}
          loading={submitting}
          style={{ marginLeft: 8 }}
        >
          下一步，填写商品属性
        </Button>
      </Form.Item>
    </Form>
  );
};
export default connect(
  ({
    addProduct,
    loading,
  }: {
    addProduct: StateType;
    loading: {
      effects: { [key: string]: boolean };
    };
  }) => ({
    submitting: loading.effects['addProduct/submitStepForm'],
    data: addProduct.formData,
  }),
)(Form.create<Step2Props>()(Step2));
